import Title from '../component/Title';
import './index.less';
import banner2 from '@/config/img/banner2.png';
import hf1 from '@/config/img/hf1.png';
import hf2 from '@/config/img/hf2.png';
import hf3 from '@/config/img/hf3.png';
import tou1 from '@/config/img/tou1.png';
const PopularMore = () => {
  const characterList = [
    {
      title: '武生巾',
      img: tou1,
    },
    {
      title: '蓝缎平金网纹二龙戏珠纹女水袖',
      img: hf1,
    },
    {
      title: '绿缎平金网纹二龙戏珠纹男靠',
      img: hf2,
    },
    {
      title: '蓝缎平金网纹二龙戏珠纹女水袖',
      img: hf3,
    },
  ];
  return (
    <div className="popular-makeup">
      <div className="banner">
        <img src={banner2} alt="" />
      </div>
      <div className="makeup-content">
        <Title
          title="雷剧妆容"
          enTitle="LeiJu Makeup"
          className="makeup-title"
        ></Title>
        <div className="character-content">
          <div className="content-insert">
            {characterList.map((val) => {
              return (
                <div className="left-item">
                  <img src={val.img} alt="" />
                  <div className="left-text">{val.title}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default PopularMore;
